<template>
<div>
   <div class="refu" v-for="(v,i) in data" :key="i">
    <div class="picture"> <img :src="v.urlfu"  @click="fun()"> </div>
    <div class="zitext" @click="funb()">
      <Rezi :data="data" />
    </div>
    <div class="more">
      <div class="fenlei">— 更多分类 —</div>
      <div class="fenleiyi">
        <div class="fenleixi">资讯</div>
        <div class="fenleixi">最新文章</div>
        <div class="fenleixi">区块链</div>
        <div class="fenleixi">人工智能</div>
        <div class="fenleixi">云计算/大数据</div>
        <div class="fenleixi">前端开发</div>

      </div>
    </div>

  </div>
</div>
 
</template>

<script>
import Rezi from '@/components/foundcomp/rezi.vue'
export default {
components:{
  Rezi
},
props:{

data:Array
},
methods:{
  fun(){
    this.$router.push("/detail")
  },
  funb(){
    this.$router.push("/tiaozhuan")
  }
}
}
</script>

<style scoped>
.refu{
  width: 100%;
  height: 5.555rem;
  /* background-color: violet; */
  margin-top: 0.65rem;
}
.picture{
  height: 1.39rem;
  /* background-color: yellow; */
  text-align: center;
}
.picture img{
  width: 3.43rem;
  height: 1.39rem; 
}
.zitext{
  height: 3.1rem;
  /* background-color: purple; */
}
.more{
  height: 1.31rem;
  /* background-color: seagreen; */
}
.more>.fenlei{
  width: 3.23rem;
  height: 0.43rem;
  /* background-color: slategray; */
  font-size: 0.13rem;
  margin: auto;
  text-align: center;
  line-height: 0.65rem;
  color: #616a67;
}
.fenleiyi{
  width: 3.23rem;
  height: 0.88rem;
  /* background-color: springgreen; */
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.fenleixi{
  width: 0.92rem;
  height: 0.27rem;
  background-color: #f2f2f2;
  border-radius: 10px;
  text-align: center;
  line-height: 0.27rem;
  font-size: 0.13rem;
  color: #616a67;
}
.zitext{
  overflow: auto;
}
</style>